<template>
  <div v-loading="isVisualVappShowLoadingProgress && isLoading" class="chartMain">
    <ComponentTitle
      :property="config.config.property"
      :isTitleSignVisiable="isTitleSignVisiable"
      :titleTextStyle="getCssStyle('title')"
    />
    <div class="outer-frame" :style="{ ...getCssStyle('grid'), paddingLeft: 0, paddingRight: 0 }">
      <div :id="`chartMain${chartId}`" class="card-form-content">
        <div
          v-if="!isDataAbnormal"
          class="search-contioner"
          :style="{ paddingLeft: getCssStyle('grid').paddingLeft, paddingRight: getCssStyle('grid').paddingRight }"
        >
          <el-input
            v-if="isSearch"
            v-model="searchText"
            class="card-search"
            :style="setSearchStyle()"
            size="default"
            clearable
            :placeholder="placeholder"
            @clear="handleSearch"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button icon="Search" @click="handleSearch" />
            </template>
          </el-input>
          <SortIcon
            v-show="showSort && !hadSortTypeIcon"
            :class="componentStyle"
            :theme="componentStyle"
            :sortType="sortType"
            :style="geSortIconCssStyle()"
            @handle-click="sortCardList"
          ></SortIcon>
          <div
            v-show="showSort && hadSortTypeIcon"
            class="icon-wrapper"
            @click="sortCardList"
          >
            <div class="cover"></div>
            <IconEditor
              :icon="sortTypeIcon"
              :component-style="componentStyle"
              :style="geSortIconCssStyle()"
              :has-sync="true"
            />
          </div>
        </div>
        <div
          :class="{ 'card-container': true, dark: componentStyle === 'dark' }"
          :style="{
            paddingLeft: getCssStyle('grid').paddingLeft,
            paddingRight: getCssStyle('grid').paddingRight,
          }"
        >
          <ul
            v-if="!isDataAbnormal"
            ref="cardContain"
            v-infinite-scroll="load"
            class="card-list"
            :infinite-scroll-disabled="true"
            :infinite-scroll-immediate="true"
            :style="setScrollStyle()"
          >
            <li
              v-for="(item, index) in cardlList"
              :key="index"
              class="card-list-item"
              :style="{
                ...getCssStyle('inline'),
                ...((selectedIndex === index || hoverIndex === index) && showSelected
                  ? {
                    ...getCssStyle('selected'),
                    ...getCssStyle('selectedBorder'),
                    ...getSelectedBorderCssStyle(),
                  }
                  : {}),
              }"
              @mouseover="hoverIndex = index"
              @mouseout="hoverIndex = -1"
              @click="handleClick(item, $event, index)"
            >
              <div class="item-content">
                <div class="card-name" :style="getCssStyle('cardName')">
                  <span :title="showName(item)">{{ showName(item) }}</span>
                </div>
                <div
                  class="card-indicator"
                  :style="{
                    ...getCssStyle('indicator'),
                    ...(isThreshold ? getThresholdStyle(item) : {}),
                  }"
                >
                  <span :title="showIndicator(item)">{{ showIndicator(item) }}</span>
                </div>
              </div>
              <div v-if="item.label && showTag" class="item-content-tags" style="marginBottom:10px">
                <template v-for="(item1, index1) in item.label ? String(item.label).split(',') : []" :key="index1">
                  <div :style="{ ...getCssStyle('tag') }" class="card-tags" :title="item1">
                    <span class="tag-inner">{{ item1 }}</span>
                  </div>
                </template>
              </div>
              <div v-show="description" class="item-content">
                <DescriptionHtml
                  v-model:description="orgCardlList[index].description"
                  :descriptionTemp="description"
                  :vars-value="item.varsValue"
                />
              </div>
              <div
                :style="{ borderTop: '1px solid', marginTop: '10px', borderColor: getCssStyle('inline').borderColor }"
              ></div>
            </li>
          </ul>
          <p v-if="infiniteLoading">加载中...</p>
          <NoData
            :isNoData="isNoData"
            :boxBgColor="boxBgColor"
            :noDataPromptType="config.config.property.noDataPromptType"
            :noDataPrompt="config.config.property.noDataPrompt"
          />
          <AbnormalData :isDataAbnormal="isDataAbnormal" :boxBgColor="boxBgColor" :abnormalType="abnormalType" />
          <div class="my-pagination-wrapper">
            <el-pagination
              v-show="showPagination && (total || cardlList.length) && !isNoData && !isDataAbnormal"
              v-model:current-page="currentPage"
              :page-size="Number(pageSize)"
              :style="{...getPaginationCssStyle(), ...setScrollStyle()}"
              small
              background
              layout="total, prev, pager, next"
              :total="total || cardlList.length"
              :pager-count="myPagerCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import chartBase from '@/mixin/chart-base.js';
import emitComponentBase from '@/mixin/emit-component-base.js';
import dataModel from '@/models/panel-config-data.js';
import { EMIT_PARAMS_OBJ } from '@/utils/constant';
import { adjustFontSize, evalFormula, xssValueFilter } from '@/utils/util';
import ComponentTitle from '../common/component-title/component-title.vue';
import NoData from '../common/no-data/no-data.vue';
import AbnormalData from '../common/abnormal-data/abnormal-data.vue';
import DescriptionHtml from './components/DescriptionHtml';
import config from './config/config';
import dfCssStyle from './config/cssStyle-default.js';
import SortIcon from './components/SortIcon';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import { specialCharRule } from '@/utils/rules.js';

export default {
  name: 'CardIndicatorForm',
  components: {
    ComponentTitle,
    DescriptionHtml,
    NoData,
    AbnormalData,
    SortIcon,
    IconEditor,
  },
  mixins: [chartBase, emitComponentBase],
  props: ['widgetInstanceId', 'w'],
  data() {
    const _config = JSON.parse(JSON.stringify(config.config.property));
    return {
      isLoading: false,
      isNoData: false,
      orgConfig: [],
      config: null,
      ..._config,
      chartId: '',
      dfCssStyle,
      cardlList: [],
      orgCardlList: [],
      searchText: '',
      search: '',
      infiniteLoading: false,
      selectedIndex: -1,
      hoverIndex: -1,
      currentPage: 1,
      total: 0,
      myPagerCount: 5,
    };
  },
  computed: {
    noMore() {
      return !this.cardlList.length;
    },
    disabled() {
      return this.infiniteLoading || this.noMore;
    },
    hadSortTypeIcon() {
      return (this.sortType === 'desc' && this.hadSortTypeDescIcon) || (this.sortType === 'asc' && this.hadSortTypeAscIcon);
    },
    hadSortTypeDescIcon() {
      return this.sortTypeDesc.icon?.icon_id ? true : false;
    },
    hadSortTypeAscIcon() {
      return this.sortTypeAsc.icon?.icon_id ? true : false;
    },
    sortTypeIcon() {
      return this.sortType === 'asc' ? this.sortTypeAsc.icon : this.sortTypeDesc.icon;
    },
  },
  created() {
    this.orgConfig = config;
    this.config = JSON.parse(JSON.stringify(this.orgConfig));
    this.chartId = `${this.widgetInstanceId}_01`;
  },
  methods: {
    validateSearchValue(showTip = false) {
      const validate = specialCharRule.regex.test(this.searchText);
      if (!validate && showTip) {
        this.$message.warning(specialCharRule.message);
      }
      return validate;
    },
    createParamObj(code, value) {
      return {
        code,
        value,
      };
    },
    handleSearch() {
      if (!this.searchText) {
        this.search = this.searchText;
        this.getChartData();
        return;
      }
      if (this.searchText && !this.validateSearchValue(true)) {
        return;
      }
      this.search = this.searchText;
      this.getChartData();
    },

    // 排序升序或者降序
    sortCardList(e) {
      this.sortType = this.sortType === 'desc' ? 'asc' : 'desc';

      // 请求接口升序或者降序
      this.getChartData();
    },

    // 初始加载时 以及 编排面更改配置时 触发
    loadWidget(pageStatus) {
      this.pageStatus = pageStatus;
      this.updateConfigProperty();
      this.updateConfigData();
      if (window.isLocalEnv || this.emitComponentStatus) {
        this.updateParams(pageStatus);
        !this.isRealTime && this.debounceGetData();
      }
      this.afterLoadWidget();
    },

    sendAllMessages(n) {
      this.executeAction('', n);
      const evtKey = this.orgConfig.events[0].key;
      const outObj = { key: '' };
      const keys = [];
      const parameters = [];
      this.config.events[0].parameters.forEach(p => {
        if (!p.key.includes(EMIT_PARAMS_OBJ)) {
          keys.push(p.key);
          let { value } = p;
          const match = p.value.match(/^\{(.*)\}$/); // 字段变量 {y1}
          if (match) {
            value = n[match[1]];
          }
          parameters[p.key] = value;
        }
      });

      outObj[EMIT_PARAMS_OBJ] = {
        eventKey: this.config.events[0].key,
        type: 'terms',
        keys,
        parameters,
        widgetInstanceId: this.widgetInstanceId,
        componentName: this.config.propertyPannelName,
        sendTime: new Date().getTime(),
      };
      this.vsEmit(evtKey, outObj);
    },
    handleClick(item, e, index) {
      e.stopPropagation();

      this.selectedIndex = index;
      if (this.showSelected) {
        this.setBackgroundColor(e);
      }
      this.sendAllMessages(item);
      this.sendAdvancedLinkagge(item);
    },

    getVarsValue(item) {
      const { tableData } = this.config.config.data || {};
      const descriptionVars = (tableData || [])
        .map(({ isDelete, field, mapping }) => (isDelete ? { field, mapping } : null))
        .filter(id => id);
      const varsValue = {};
      descriptionVars.forEach(({ field, mapping }) => {
        varsValue[field] = item[field];
      });
      return varsValue;
    },
    processFinalRes(arr) {
      this.cardlList = (arr || this.orgCardlList).map(item => ({
        ...item,
        varsValue: this.getVarsValue(item),
      }));
      if (this.cardlList?.length) {
        this.selectedIndex = 0;
        this.sendAllMessages(this.cardlList[0]);
      } else {
        this.isNoData = true;
      }
    },
    replaceHtml(descriptionTemp, varsValue = {}) {
      let html = adjustFontSize(descriptionTemp);
      const vars = { ...varsValue };

      // 将其中的变量替换为数据
      Object.entries(vars).map(([i]) => {
        const regex = new RegExp(`\\$\\{${i}\\}`, 'g');
        html = html.replace(regex, vars[i] ? vars[i] : '');
      });

      // 替换计算公式
      const arr = html.match(/\${[^}]+}/g); // ${a+b*d-e/f}
      if (arr) {
        for (let i = 0; i < arr.length; i++) {
          let formula = arr[i].replace('${', '').replace('}', '');
          Object.entries(vars).map(([j, val]) => {
            const regex1 = new RegExp(j, 'g');
            formula = formula.replace(regex1, vars[j] ? vars[j] : '');
          });
          try {
            const val = evalFormula(formula);
            while (html.indexOf(arr[i]) !== -1) {
              html = html.replace(arr[i], val);
            }
          } catch (e) {
            // 不处理
          }
        }
      }
      const htmlResult = xssValueFilter(html, 'editor') || '';
      return htmlResult;
    },
    addDescription(result) {
      return (result || []).map(item => {
        const varsValue = this.getVarsValue(item);

        return {
          ...item,
          description: this.replaceHtml(this.description, varsValue),
        };
      });
    },
    getChartData() {
      const { data } = this.config.config;

      // 如果dataSourceType为静态数据,把数据放到Vuex，发出事件，然后退出
      if (data.dataSourceType === 'staticData') {
        const result = this.getStaticData();
        this.sendDataToConfig(result);
        this.isNoData = !result || !result.length;
        this.orgCardlList = this.addDescription(result);
        if (this.search) {
          return;
        }
        this.processFinalRes();

        // 重置数据异常状态
        this.resetAbnormalType();
        return;
      }
      this.isLoading = true;
      this.autoRefresh();

      // 加上PageTable，返回total总条数
      const method = `getChartData${data.dataSourceType}`;
      const params = this.getCorrectParams(this.params, data.dataSourceType);

      // 设置分页参数
      params.pageIndex = Number(this.currentPage);
      params.pageSize = Number(this.pageSize);
      params.total = true;

      if (this.isSearch && this.search) {
        const searchParam = this.createParamObj('cardSearchKey', this.search);
        params.params?.push?.(searchParam);
      }

      if (this.showSort) {
        const sortParam = this.createParamObj('cardOrderType', this.sortType);
        params.params?.push?.(sortParam);
      }

      const dataModelObj = dataModel[method];
      dataModelObj(params, data, true)
        .then(response => {
          const result = response?.data || response;
          this.total = response?.total || result?.length || 0;
          this.resetAbnormalType();
          this.reportIfFieldsError(this.getParams()?.propertyMapping, result);
          this.isNoData = !result?.length;
          if (this.autoRefreshIsSameRes(result)) {
            return;
          }
          this.lastParams = null;
          this.sendDataToConfig(result);
          this.orgCardlList = this.addDescription(result);
          this.processFinalRes();
        })
        .catch(err => {
          this.handleChartDataError(err);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },

    // 接收xvue发来的实时数据
    handleRealTimeCommunication(realTimeData) {
      const { datalist } = realTimeData || {};
      if (!datalist || datalist.length === 0 || !datalist[0].data || datalist[0].data.length === 0) {
        this.isNoData = true;
        return;
      }
      const result = datalist[0].data;
      this.isNoData = !result?.length;

      // api请求，拿到数据
      this.orgCardlList = this.addDescription(result);
      if (this.search) {
        return;
      }
      this.processFinalRes();
    },
    load() {
      this.infiniteLoading = false;
    },
    setSearchStyle() {
      const searchStyleObj = this.getCssStyle('search');
      const searchBtnStyleObj = this.getCssStyle('searchBtn');
      const bgColor = searchStyleObj.backgroundColor;
      return {
        '--color': searchStyleObj.color,
        '--borderColor': searchStyleObj.borderColor,
        '--backgroundColor': bgColor.replace('!important', ''),
        '--height': searchStyleObj.height,
        '--searchFontSize': searchStyleObj.fontSize,
        '--width': searchBtnStyleObj.width,
        '--backgroundColorBtn': searchBtnStyleObj.backgroundColor.replace('!important', ''),
        '--searchBtnFontSize': searchBtnStyleObj.fontSize,
        '--fontWeight': searchBtnStyleObj.fontWeight,
        '--fontFamily': searchBtnStyleObj.fontFamily,
        '--colorBtn': searchBtnStyleObj.color,
      };
    },
    setScrollStyle() {
      const styleObj = this.getCssStyle('scroll');
      return {
        '--thumbBackgroundColor': styleObj.color,
        '--trackBackgroundColor': styleObj.backgroundColor.replace('!important', ''),
        '--scrollWidth': styleObj.width,
      };
    },
    getThresholdStyle(item) {
      // 获取tag的阈值颜色
      const currentThreshold = this.threshold.find(({ min, max }) => item.indicator >= min && item.indicator < max);
      const style = {};
      if (currentThreshold) {
        style.color = currentThreshold.color;
      }
      return style;
    },
    doesContain(val) {
      if (val) {
        return String(val).includes(this.search);
      }
      return false;
    },
    showName(item) {
      return item.name;
    },
    showIndicator(item) {
      let { indicator } = item;
      if (indicator === null || indicator === undefined || indicator === '') {
        indicator = '-';
      }
      return `${this.indicatorName}${indicator}${this.indicatorUnit}`;
    },
    setBackgroundColor(e) {
      e.currentTarget.style.background = this.dfCssStyle?.selected.backgroundColor;
    },
    clearBackgroundColor(e) {
      e.currentTarget.style.background = '';
    },
    handleCurrentChange(val) {
      this.selectedIndex = -1;
      this.currentPage = val;
      this.getChartData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    getPaginationCssStyle() {
      const paginationCssStyle = this.getCssStyle('pagination');
      const paginationSelectedCssStyle = this.getCssStyle('paginationSelected');
      return {
        ...paginationCssStyle,
        '--fontSize': paginationCssStyle.fontSize,
        '--activeFontSize': paginationSelectedCssStyle.fontSize,
        '--activeFontWeight': paginationSelectedCssStyle.fontWeight,
        '--activeFontFamily': paginationSelectedCssStyle.fontFamily,
        '--activeColor': paginationSelectedCssStyle.color,
        '--activeBackgroundColor': paginationSelectedCssStyle.backgroundColor.replace('!important', ''),
        '--pageHeight': paginationCssStyle.height,
        '--pageWidth': paginationCssStyle.width,
      };
    },
    getSelectedBorderCssStyle() {
      if (!this.showSelected || this.borderPosition === 'Unset' || !this.dfCssStyle?.selectedBorder) {
        return {};
      }
      let borderKey;
      if (this.borderPosition === 'All') {
        borderKey = 'border';
      } else {
        borderKey = `border${this.borderPosition}`;
      }
      const borderStyle = this.getCssStyle('selectedBorder');
      return {
        [borderKey]: `${this.borderSize}px solid ${borderStyle?.borderColor ?? ''}`,
      };
    },
    createEventMsg({ event, key, value }) {
      return {
        [key]: value,
        [`emit_params_obj_${this.widgetInstanceId}`]: {
          eventKey: event,
          type: 'terms',
          keys: [key],
          parameters: {
            [key]: value,
          },
          'widgetInstanceId': this.widgetInstanceId,
          'sendTime': new Date().getTime(),
        },
      };
    },
    myAcceptEvtMsg(data) {
      const obj = this.createEventMsg(data);
      this.updateRequestBody();
      this.updateParams(obj);

      // 实时通讯组件接收到参数后不能主动去获取数据
      if (!this.isRealTime) {
        this.debounceGetData();
      }
    },
    geSortIconCssStyle() {
      const sortIconCssStyle = this.getCssStyle('sortIcon');
      return {
        '--sortIconHeight': sortIconCssStyle.height,
        '--sortIconWidth': sortIconCssStyle.Width,
      };
    },
    getCardContainerCssStyle() {
      const cssStyle = getCssStyle('grid');
      return {
        '--cardContainerPaddingLeft': cssStyle.paddingLeft,
        '--cardContainerPaddingRight': cssStyle.paddingRight,
      };
    },
  },
};
</script>
<style lang="less" scoped>
.chartMain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .my-pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    :deep(.el-pagination) {
      width: auto!important;
      overflow-x: auto;
      overflow-y: hidden;
      &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
        background-color: transparent!important;
        width: var(--scrollWidth) !important;
      }
      &::-webkit-scrollbar-track{
        background-color: transparent!important;
      }

      &:hover::-webkit-scrollbar-thumb {
        /* 滚动条里面小方块 */
        background: var(--thumbBackgroundColor) !important;
      }

      &:hover::-webkit-scrollbar-track {
        /* 滚动条里面轨道 */
        background: var(--trackBackgroundColor) !important;
      }

      &:hover::-webkit-scrollbar-corner {
        background-color: var(--trackBackgroundColor) !important;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &:hover::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: var(--trackBackgroundColor) !important;
      }
      button,
      .number,
      .el-pagination__total,
      .btn-quicknext, .btn-quickprev{
        background-color: unset;
        color: unset;
        font-weight: unset;
        font-size: var(--fontSize);
      }
      .btn-prev{
        margin-left: 2px;
      }
      .number {
        width: var(--pageWidth);
        height: var(--pageHeight);
        &.is-active {
          font-size: var(--activeFontSize);
          font-weight: var(--activeFontWeight);
          font-family: var(--activeFontFamily);
          color: var(--activeColor);
          background-color: var(--activeBackgroundColor);
        }
      }
    }
  }

  .outer-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: auto;
  }

  .card-form-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;

    .search-contioner {
      display: flex;
      align-items: center;
      width: 100%;
      .card-search {
        margin: 10px 0;
        margin-right: 20px;
        :deep(.el-input__wrapper) {
          border: 1px solid var(--borderColor);
          color: var(--color);
          background-color: var(--backgroundColor);
          height: var(--height);
          font-size: var(--searchFontSize);
          border-right: none;
          box-shadow: unset;
          .el-input__inner {
            color: inherit;
            height: var(--height);
          }
        }

        :deep(.el-input__icon) {
          color: var(--color);
        }

        :deep(.el-input__inner::placeholder) {
          color: var(--color);
        }

        :deep(.el-input-group__append) {
          background-color: var(--backgroundColor);
          border: 1px solid;
          border-color: var(--borderColor);
          border-left: none;
          width: var(--width);
          height: var(--height);
          box-shadow: unset;
          padding: 0;
          border-radius: 0px 6px 6px 0px;
          .el-button {
            color: var(--colorBtn);
            width: var(--width);
            background-color: var(--backgroundColorBtn);
            font-size: var(--searchBtnFontSize);
            height: var(--height);
            display: flex;
            align-items: center;
            border-radius: 0px 4px 4px 0px;
            padding: 0;
            .el-icon {
              color: var(--colorBtn);
              font-size: var(--searchBtnFontSize);
            }
          }
        }
      }
    }

    :deep(.sort-type-icon) {
      cursor: pointer;
      margin: 10px 0;
      height: var(--sortIconHeight);
      width: var(--sortIconWidth);
    }
    .icon-wrapper{
      position: relative;
      .cover{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
      }
    }
    :deep(.icon-editor){
      .vs_icon{
        width: 36px!important;
        height: 36px!important;
      }
    }
    .card-container {
      width: 100%;
      flex: 1;
      overflow: hidden;
      color: #a5adb5;
      display: flex;
      flex-direction: column;
      padding-left: var(--cardContainerPaddingLeft);
      padding-right: var(--cardContainerPaddingRight);
      .card-list {
        overflow: auto;
        &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
          background-color: transparent!important;
          width: var(--scrollWidth) !important;
        }
        &::-webkit-scrollbar-track{
          background-color: transparent!important;
        }

        &:hover::-webkit-scrollbar-thumb {
          /* 滚动条里面小方块 */
          background: var(--thumbBackgroundColor) !important;
        }

        &:hover::-webkit-scrollbar-track {
          /* 滚动条里面轨道 */
          background: var(--trackBackgroundColor) !important;
        }

        &:hover::-webkit-scrollbar-corner {
          background-color: var(--trackBackgroundColor) !important;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &:hover::-webkit-scrollbar-track {
          border-radius: 4px;
          background-color: var(--trackBackgroundColor) !important;
        }
        .card-list-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          padding: 10px;
          padding-bottom: 0;

          .item-content {
            flex: 1;
            display: flex;
            align-items: center;
            .card-name {
              width: calc(100% - 80px);
              height: 40px;
              line-height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .card-indicator {
              flex-shrink: 0;
              padding: 0 4px;
              border-radius: 3px;
            }
            .card-tags {
              margin-right: 12px;
              text-align: center;
              border-radius: 3px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 4px;
            }
          }
          .item-content-tags {
            flex: 1;
            .card-tags {
              display: inline-flex;
              margin-right: 12px;
              justify-content: center;
              border-radius: 3px;
              padding: 0 4px;
              margin-bottom: 4px;
              .tag-inner {
                display: inline-block;
                width: auto;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 100px;
              }
            }
          }
        }
      }

      & > p {
        height: 36px;
        line-height: 36px;
        width: 100%;
        display: block;
        text-align: center;
      }
    }
  }
}
</style>
